import React, { Component } from "react";
import { Table, notification,Button } from "antd";
import axios from "axios";
const columns = [
  {
    title: "问卷ID",
    dataIndex: "Qid",
    render: text => <a href={"http://localhost:8080/#/ModifyQuestionnaireDetails/"+text}>{text}</a>
  },
  {
    title: "问卷名称",
    dataIndex: "Title"
  },
  {
    title: "创建时间",
    dataIndex: "CreateTime"
  }
];
class ModifyQuestionnaire extends Component {
  constructor(props) {
    super(props);
    this.onSelectChange = this.onSelectChange.bind(this);
    this.delete = this.delete.bind(this);
    // 设置 initial state
    this.state = {
      selectedRowKeys: [], // Check here to configure the default column
      questionnaires: []
    };
  }
  componentDidMount() {
    var _this = this;
    axios
      .get("http://localhost:7952/api/Questionnaire/GetAllQuestionnaire")
      .then(function(response) {
        _this.setState({ questionnaires: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
  }
  onSelectChange(selectedRowKeys) {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  }
  delete() {
    var _this = this;
    this.state.selectedRowKeys.map(s => {
      axios
        .get(
          "http://localhost:7952/api/Questionnaire/DeleteQuestionnaireById/"+s
        )
        .then(function(response) {
          if (response.data != null) {
            _this.setState({ questionnaires: response.data });
            notification.success({
              placement: "bottomRight",
              message: "操作提示",
              description: "删除成功！"
            });
          } else {
            notification.warn({
              placement: "bottomRight",
              message: "操作提示",
              description: "删除失败，问卷已被填写，请勿删除！"
            });
          }
        })
        .catch(function(response) {
          console.log(response);
        });
    });
    this.setState({selectedRowKeys:[]})
  }
  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div className="content-wrapper">
        <section
          className="content"
          style={{
            minHeight: 650
          }}
        >
          <div>
            <section className="content-header">
              <h1>
                修改问卷
                <small>问卷概览</small>
              </h1>
              <ol className="breadcrumb">
                <li>
                  <a href="#">
                    <i className="fa fa-dashboard" />
                    Stage
                  </a>
                </li>
                <li>
                  <a href="#">后台管理</a>
                </li>
                <li className="active">修改问卷</li>
              </ol>
            </section>
            <br />
            <div
              className="box"
              style={{
                minHeight: 530
              }}
            >
              <div className="box-header with-border">
                <h3 className="box-title">修改问卷</h3>
                <div className="box-tools pull-right">
                  <span className="label label-primary">概览</span>
                </div>
              </div>
              <div className="box-body">
                <div style={{ marginBottom: 16 }}>
                  <Button
                    type="primary"
                    onClick={this.delete}
                    disabled={!hasSelected}
                  >
                    删除
                  </Button>
                  <span style={{ marginLeft: 8 }}>
                    {hasSelected ? `选择了 ${selectedRowKeys.length} 个问卷` : ""}
                  </span>
                </div>

                <Table
                  rowKey="Qid"
                  size="small"
                  rowSelection={rowSelection}
                  columns={columns}
                  dataSource={this.state.questionnaires}
                />
              </div>
              <div className="box-footer" />
            </div>
          </div>
        </section>
      </div>
    );
  }
}
export default ModifyQuestionnaire;
